<template>
    <div id="friend-list">
      <div class="content-left">
        <!-- 搜索框 -->
        <div class="search">
          <search></search>
        </div>
        <p>新的朋友
          <el-tooltip effect="dark" placement="top" content="点击刷新列表">
            <el-button :loading="refreshIsLoading" @click="refreshFriendList">
              <i :class="{'el-icon-refresh':!refreshIsLoading}"/>
            </el-button>
          </el-tooltip>
        </p>
        <div class="new-friend" :class="{active:newFriendActive}" @click="openRequestList">
          <el-avatar :src="require('@/assets/img/add-friend.png')" shape="square"></el-avatar>
          <span>新的朋友</span>
          <div v-if="requestMessageList.length>0" class="inform-count">{{requestMessageList.length}}</div>
        </div>
        <p>朋友列表</p>
          <el-scrollbar style="height: 84%">
            <div style="height: 520px">
              <friend v-for="(user,index) in friendList"
                      :key="user.userid"
                      :user-id="user.userid"
                      :name="user.username"
                      :avatar="user.avatar"
                      :index="index"
                      @click.native="showInfo"></friend>
            </div>
          </el-scrollbar>
        </div>

      <div class="content-right">
        <component :is="friendActive"></component>
      </div>
    </div>
</template>

<script>
  import Search from "@/views/chat/Search";
  import Friend from "@/views/chat/Friend";
  import FriendInfo from "@/views/chat/FriendInfo";
  import RequestMessage from "@/views/chat/RequestList";
  import {mapGetters} from 'vuex'

    export default {
        name: "FriendList",
      components:{
          Search,Friend,FriendInfo,RequestMessage
      },
      data(){
        return{
          refreshIsLoading:false
        }
      },
      computed:{
        ...mapGetters([
          'friendActive','friendList','requestMessageList','currentFriendInfo'
        ]),
        newFriendActive(){
          return  this.friendActive === 'request-message'
        }
      },
      methods:{
        openRequestList(){
          this.$store.commit('chat/SET_FRIEND_ACTIVE','request-message')
          this.$store.commit('chat/SET_CURRENT_FRIEND_INFO','')
          console.log(this.friendActive)
        },
        showInfo(){
          this.$store.commit('chat/SET_FRIEND_ACTIVE','friend-info')
        },
        // 刷新朋友列表
        refreshFriendList(){
          this.refreshIsLoading = true // 设置刷新按钮为加载中状态
          this.$store.dispatch('chat/getRequestMessageList').then(()=>{
            console.log("请求消息列表重新载入成功")
          })
          this.$store.dispatch('chat/getConversationListTIM')
          this.$store.dispatch('chat/getFriendList').then(() => {
            console.log("朋友列表重新载入成功！")
            setTimeout(() => {
              this.$store.commit('chat/showMessage', {
                message: '朋友列表刷新成功！',
                type: 'success'
              })
              // 更新当前查看用户信息资料
              if (this.currentFriendInfo.userid) {
                this.friendList.forEach(item => {
                  if (item.userid === this.currentFriendInfo.userid) {
                    this.$store.commit('chat/SET_CURRENT_FRIEND_INFO', item)
                  }
                })
              }
              this.refreshIsLoading = false
            }, 1500)
          });
        }
      },
      mounted() {
        document.title = '通讯录 📕'
      }
    }
</script>

<style scoped>
  #friend-list{
    display: flex;
    height: 100%;
  }
  .content-left{
    width: 28%;
    max-width: 300px;
    height: 100%;
    border-top: 1px solid transparent;
    background-color: #f6f6f6;
  }
  .search {
    margin: 14px 12px 10px;
  }
  .content-left p{
    color: #99a2b9;
    height: 24px;
    line-height:24px;
    font-size: 12px;
    margin:0 12px;
  }
  .content-left p .el-button{
    float: right;
    padding: 0;
    border: 0;
    line-height:16px;
    background-color: transparent;
    font-size:20px;
    font-weight:700;
  }

  .new-friend {
    position: relative;
    display: flex;
    font-size: 14px;
    /* 光标变小手 */
    cursor: pointer;
    width: 100%;
    height: 60px;
  }
  .new-friend:hover{
    background-color: #e3e5e5;
  }
  .new-friend .el-avatar{
    width: 38px;
    height: 38px;
    margin: 12px 12px;
  }
  .new-friend span {
    margin: 0 5px;
    line-height: 60px;
  }
  .content-right{
    flex: 2;
  }

  .inform-count{
    position: absolute;
    left: 40px;
    min-width: 17px;
    height: 17px;
    border-radius: 50%;
    color: #ffffff;
    text-align: center;
    font-size: 11px;
    line-height: 17px;
    background-color: #fe6158;
    border: 1px solid transparent;
  }

  .active{
    background-color: #c4c7c7;
  }
  .active:hover{
    background-color: #c4c7c7;
  }
</style>
